import Alert from '@/components/Alert';
import Modal from '@/components/Modal';
import { DynamicColors } from '@/utils/DarkMode';
import { Image, Text, View } from '@tarojs/components';
import Taro from '@tarojs/taro';
import React, { useEffect, useState } from 'react';

const LimitCheckModal = ({ device }: { device: any }) => {
  const [visible, setVisible] = useState(true);
  console.log('devicedevicedevice', device)
  useEffect(() => {
    if (device.used_quota >= device.quota) {
      setVisible(true);
    } else {
      setVisible(false);
    }
  }, [device]);
  return (
    <Alert content={(
      <View style={{flexDirection: 'column', alignItems: 'center'}}>
        <Image style={{width: 100, height: 100}} src="https://xbgroup-static.gizwits.com/cybertron/users/391941/media/%E4%BF%A1%E7%94%A8%E5%8D%A1%E6%94%AF%E4%BB%98-01_1744356808470.png"></Image>
        <View style={{fontSize: 14, color: DynamicColors.normalTextGaryColor.value}}>当前用量已达到上限</View>
      </View>
    )} okText="去充值" onConfirm={() => {
      Taro.navigateTo({
        url: `/pages/payment/packages?id=${device.id}`
      })
    }} title="提示" visible={visible}>
    </Alert>
  );
};

export default LimitCheckModal;
